<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * 
        {
          margin: 0px;
        }
      
        .out 
        {
          position: absolute;
          width: 200px;
          height: 200px;
          top: 20px;
          left: 10px;
          background: blue;
        }
      
        .inner 
        {
          position: absolute;
          width: 100px;
          height: 100px;
          top: 50px;
          background: red;
        }
      
        .divBtn 
        {
          position: absolute;
          top: 250px;
        }

        .div1
        {
          height: 200px;
          width: 200px;
          background-color: yellow;
          margin-top: 400px;
          margin-left: 400px;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.给.out绑定点击监听(用两种方法绑定)
        2.给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
        3.点击btn1解除.inner上的所有事件监听
        4.点击btn2解除.inner上的mouseover事件
        5.点击btn3得到事件坐标
        6.点击.inner区域, 外部点击监听不响应
        7.点击链接, 如果当前时间是偶数不跳转
        */
         
        $(function(){
            //1.给.out绑定点击监听(用两种方法绑定)
            var $div_out=$("div.out");
            //eventName(function(){}),绑定对应事件名的监听,	例如：$('#div').click(function(){});
            /*
            $div_out.click(function(){
              console.log($div_out.html());
            })
            */
            //on(eventName, funcion(){}),通用的绑定事件监听, 例如：$('#div').on('click', function(){})
            $div_out.on("click",function(){
              console.log($div_out.html());
            })

            //2.给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
            var $div_inner=$("div.inner");
            //鼠标移入mouseenter(function(){})和鼠标移出mouseleave(function(){})
            /*
            $div_inner.mouseenter(function(){
              console.log("我进来了");
            })
            $div_inner.mouseleave(function(){
              console.log("我又出来了");
            })
            */
            //on(eventName, funcion(){}),通用的绑定事件监听, 例如：$('#div').on('click', function(){})
            /*
            $div_inner.on("mouseenter",function(){
              console.log("我进来了");
            })
            $div_inner.on("mouseleave",function(){
              console.log("我又出来了");
            })
            */
            //$.hover(function(){},function(){}) 括号内传递两个方法，第一个是进入事件，第二个是出来事件
            $div_inner.hover(function(){
              console.log("我进来了");
            },function(){
              console.log("我又出来了");
            })

            //3.点击btn1解除.inner上的所有事件监听
            var $button_btn1=$(":button#btn1");
            $button_btn1.click(function(){
              $div_inner.off();
            })

            //4.点击btn2解除.inner上的mouseenter事件
            var $button_btn2=$(":button#btn2");
            $button_btn2.click(function(){
              $div_inner.off("mouseenter");
            })

            //5.点击btn3得到事件坐标
            var $button_btn3=$(":button#btn3");
            $button_btn3.click(function(event){
              console.log(event.clientX,event.clientY);
            })
            //5.1点击div1获得事件坐标
            var $div_div1=$("div.div1");
            $div_div1.click(function(event){
              console.log(event.clientX,event.clientY);//相对于视口左上角
              console.log(event.pageX,event.pageY);//相对于页面左上角
              console.log(event.offsetX,event.offsetY)//相对于事件元素左上角
            })

            //6.点击.inner区域, 外部点击监听不响应
            $div_inner.click(function(event){
              console.log("inner.click")
              event.stopPropagation();
            })

            //7.点击链接, 如果当前时间是偶数不跳转
            var $a_test4=$("a#test4");
            $a_test4.click(function(event){
              if(Date.now()%2 === 0)
              {
                event.preventDefault();
              }
            })
        })
    </script>
</head>
<body style="height: 2000px;">
    <div class="out">
        外部DIV
        <div class="inner">内部div</div>
      </div>
      
      <div class='divBtn'>
        <button id="btn1">取消绑定所有事件</button>
        <button id="btn2">取消绑定mouseenter事件</button>
        <button id="btn3">测试事件坐标</button>
        <a href="http://www.baidu.com" id="test4">百度一下</a>
      </div>
    
    <div class="div1"></div>
      
      <!--
      1. 事件绑定(2种)：
        * eventName(function(){})
          绑定对应事件名的监听,	例如：$('#div').click(function(){});
        * on(eventName, funcion(){})
          通用的绑定事件监听, 例如：$('#div').on('click', function(){})
        * 优缺点:
          eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
          on: 编码不方便, 可以添加多个监听, 且更通用
      2. 事件解绑：
        * off(eventName)
      3. 事件的坐标
        * event.clientX, event.clientY  相对于视口的左上角
        * event.pageX, event.pageY  相对于页面的左上角
        * event.offsetX, event.offsetY 相对于事件元素左上角
      4. 事件相关处理
        * 停止事件冒泡 : event.stopPropagation()
        * 阻止事件默认行为 : event.preventDefault()
      -->
</body>
</html>